<template>
  <PageWrapper title="">
    <XGrid
    ref="xGrid"
      :stripe="false"
      :show-overflow="false"
      :columns="columns"
      :query-params="formConditionData.data"
      :query-api="getTableData"
      :deletes-api="deletes"
      @create="drawer.data.show = true"
      @edit="handleEdit"
      @copy="handleCopy">
      <template #form>
        <vxe-form :data="formConditionData.data" title-colon collapse-status>
          <vxe-form-item title="货物">
            <template #default="{ data }">
              <vxe-input
              v-model="data.word" clearable
                prefix-icon="vxe-icon-search"
                placeholder="货物编号|名称|条码"/>
            </template>
          </vxe-form-item>
          <vxe-form-item title="启用" field="enable" :folding="false">
            <template #default="{ data }">
              <vxe-select v-model="data.enable" placeholder="请选择" clearable>
                <vxe-option :value="1" label="启用"/>
                <vxe-option :value="2" label="禁用"/>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="赠品" field="isGift" :folding="false">
            <template #default="{ data }">
              <vxe-select v-model="data.isGift" placeholder="请选择" clearable>
                <vxe-option :value="1" label="是"/>
                <vxe-option :value="2" label="不是"/>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item align="center">
          <template #default>
              <vxe-button type="submit" status="default" icon="vxe-icon-search" @click="load" title="点击查询">查询</vxe-button>
              <a-popconfirm title="确定重置查询条件吗？" @confirm="reset">
                  <vxe-button status="default" icon="vxe-icon-repeat">重置</vxe-button>
              </a-popconfirm>
          </template>
          </vxe-form-item>
        </vxe-form>
      </template>
    </XGrid>
    <Drawer
:show="drawer.data.show" :is-update="drawer.data.isUpdate"
        :is-copy="drawer.data.isCopy"
        :row="drawer.data.row"
        @on-success="onSuccess"
        @on-drawer-close="onDrawerClose"/>
  </PageWrapper>
</template>
<script lang="ts" name="Goods" setup>
import { reactive, ref, toRaw, } from 'vue';
import Drawer from './Drawer.vue';
import { columns } from './data';
import { deletes, getTableData } from "/@/api/wms/goods";
import { PageWrapper } from '/@/components/Page';
import { XGrid } from '/@/components/XGrid';

const xGrid = ref()

const drawer = reactive({data: {
  show: false,
  isUpdate: false,
  isCopy: false,
  row: null,
}})

const handleEdit = (row_:any) => {
  drawer.data.show = true
  drawer.data.isUpdate = true
  drawer.data.row = row_
}

const onDrawerClose = () => {
  Object.assign(drawer, {data: {}})
}

const onSuccess = () => {
  xGrid.value.reload()
}

const handleCopy = (row:any) => {
  let data = toRaw(row)
  data.ID = null
  Object.assign(drawer.data, {show: true, isUpdate: false, isCopy: true, row: data})
}

const formConditionData = reactive({data: {
  word: '',
  cateId: '',
  enable: null,
  isGift: null,
}})

const load = () => {
  xGrid.value.reload()
}

const reset = () => {
  Object.assign(formConditionData, {data: {}});
  xGrid.value.reload(true)
}

</script>

<style scoped>
</style>
